<template>
  <div class="feedback-page">
    <!-- 模糊背景 -->
    <div class="background-layer">
      <img :src="backgroundImage" alt="反馈背景" class="background-image" />
    </div>

    <!-- 主要内容区 -->
    <div class="content-container">
      <div class="feedback-wrapper">
        <!-- 反馈表单 -->
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          class="feedback-form"
          label-position="top"
        >
          <h2 class="form-title">📬 快速反馈，联系我们</h2>
          <p class="form-subtitle">请填写您的反馈信息，我们将在24小时内回复</p>

          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入真实姓名"
              clearable
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="电子邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入常用邮箱"
              clearable
            >
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="反馈标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入反馈主题"
              maxlength="30"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="详细内容" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              :rows="5"
              placeholder="请详细描述您的问题或建议（10-500字）"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>

          <div class="form-actions">
            <el-button
              type="primary"
              :loading="submitting"
              @click="handleSubmit"
            >
              <el-icon><Promotion /></el-icon>
              提交反馈
            </el-button>
            <el-button @click="resetForm">
              <el-icon><Refresh /></el-icon>
              重置表单
            </el-button>
          </div>
        </el-form>

        <!-- 联系信息 -->
        <div class="contact-card">
          <div class="contact-info">
            <h3 class="info-title">
              <el-icon><OfficeBuilding /></el-icon>
              公司地址
            </h3>
            <p class="address">郑州市越秀区中山五路125号雨霆大厦23楼庄天地产</p>

            <h3 class="info-title">
              <el-icon><Connection /></el-icon>
              联系方式
            </h3>
            <div class="contact-methods">
              <p class="email">
                <el-icon><Message /></el-icon>
                contact@abcd.com
              </p>
              <p class="tel">
                <el-icon><Phone /></el-icon>
                400-123-789456
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  User,
  Message,
  Promotion,
  Refresh,
  OfficeBuilding,
  Connection,
  Phone,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import api from "@/api";
import { useUserStore } from "@/stores/user";
import backgroundImage from "@/assets/background3.jpg";

const userStore = useUserStore();
const formRef = ref(null);
const submitting = ref(false);

// 表单数据
const form = reactive({
  name: "",
  email: "",
  title: "",
  content: "",
});

// 验证规则
const rules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度2-10个字符", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "邮箱格式不正确", trigger: "blur" },
  ],
  title: [
    { required: true, message: "请输入反馈标题", trigger: "blur" },
    { max: 30, message: "标题最多30个字符", trigger: "blur" },
  ],
  content: [
    { required: true, message: "请输入反馈内容", trigger: "blur" },
    { min: 10, max: 500, message: "内容需10-500个字符", trigger: "blur" },
  ],
});

// 提交反馈
const handleSubmit = async () => {
  try {
    await formRef.value.validate();

    const userId = userStore.userInfo.id;
    console.log("提交反馈:", userId);

    submitting.value = true;

    await api.feedback.createFeedback(userId, {
      contactName: form.name,
      contactEmail: form.email,
      title: form.title,
      content: form.content,
    });

    ElMessage.success({
      message: "反馈提交成功",
      duration: 2000,
    });
    resetForm();
  } catch (error) {
    if (error?.message) {
      ElMessage.error(error.message);
    }
  } finally {
    submitting.value = false;
  }
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style scoped lang="css">
.feedback-page {
  position: relative;
  min-height: 100vh;
  background: rgba(245, 247, 250, 0.95);
}

.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(4px) brightness(0.96);
    opacity: 0.92;
  }
}

.content-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
}

.feedback-wrapper {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 40px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
}

.feedback-form {
  .form-title {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 12px;
    letter-spacing: 1px;

    &::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background: #409eff;
      margin-top: 8px;
    }
  }

  .form-subtitle {
    color: #7f8c8d;
    margin-bottom: 32px;
    font-size: 15px;
  }

  :deep(.el-form-item__label) {
    font-weight: 600;
    color: #475569;
    padding-bottom: 6px;
  }

  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
    }
  }
}

.form-actions {
  margin-top: 36px;
  display: flex;
  gap: 16px;

  .el-button {
    padding: 12px 28px;
    border-radius: 8px;
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }
  }
}

.contact-card {
  padding-left: 40px;
  border-left: 1px solid #e2e8f0;

  .info-title {
    display: flex;
    align-items: center;
    color: #2c3e50;
    font-size: 20px;
    margin: 28px 0 16px;

    .el-icon {
      margin-right: 10px;
      font-size: 24px;
      color: #409eff;
    }
  }

  .address {
    line-height: 1.7;
    color: #64748b;
    background: rgba(241, 245, 249, 0.6);
    padding: 12px;
    border-radius: 8px;
  }

  .contact-methods {
    p {
      display: flex;
      align-items: center;
      margin: 12px 0;
      color: #475569;

      .el-icon {
        margin-right: 10px;
        font-size: 18px;
        color: #64748b;
      }
    }
  }
}

@media (max-width: 992px) {
  .feedback-wrapper {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .contact-card {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding-top: 30px;
  }
}

@media (max-width: 768px) {
  .content-container {
    padding: 40px 12px;
  }

  .feedback-form {
    .form-title {
      font-size: 24px;
    }

    .form-subtitle {
      font-size: 14px;
    }
  }

  .form-actions {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }
}
</style>
